<template>
  <!-- 项目编辑对话框 -->
  <el-dialog
    :title="$t('projectDialog.title.editor')"
    :visible.sync="projectEditorDialogVisible"
    width="50%"
    @open="open()"
    :before-close="closeDialogCan"
  >
    <span class="main">
      <!-- <h4 @click="handler">点击</h4> -->
      <el-form
        ref="projectEditorFormRef"
        label-position="right"
        label-width="95px"
      >
        <el-form-item :label="$t('projectDialog.form.host1')">
          <el-select v-model="params.client_id">
            <el-option
              v-for="item in hostList"
              :key="item.id"
              :label="item.name"
              :value="item.id"
            >
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item :label="$t('projectDialog.form.type')" prop="client_id">
          <el-select
            filterable
            v-model="params.type"
            :placeholder="$t('projectDialog.form.select')"
          >
            <el-option label="scrapyd" value="1"></el-option>
            <el-option label="python" value="2"></el-option>
            <el-option label="other" value="3"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item :label="$t('projectDialog.form.name1')">
          <el-input v-model="params.name"></el-input>
        </el-form-item>
        <el-form-item :label="$t('projectDialog.form.descript')">
          <el-input v-model="params.description"></el-input>
        </el-form-item>
      </el-form>
    </span>
    <span slot="footer" class="dialog-footer">
      <el-button @click="closeDialogCan">{{
        $t("projectDialog.btn.cancel")
      }}</el-button>
      <el-button type="primary" @click="saveProjectEditor">{{
        $t("projectDialog.btn.save")
      }}</el-button>
    </span>
  </el-dialog>
</template>

<script>
export default {
  props: [
    "projectEditorDialogVisible",
    "projectList",
    "projectEditorId",
    "hostList",
  ],
  data() {
    return {
      // 对应项目的数据
      editorData: "",
      //params
      params: {},
    };
  },
  methods: {
    handler() {
      console.log(this.params);
    },
    open() {
      //   this.$nextTick(() => {
      //     this.statChart();
      //   });
      console.log(this.projectList);
      this.editorData = this.projectList.find((val) => {
        return val.id == this.projectEditorId;
      });
      console.log(this.editorData);
      // 直接赋值会导致不能实现双向绑定  使用vue全局方法 this.$set(data, property, value) 解决
      this.$set(this.params, "id", this.projectEditorId);
      this.$set(this.params, "type", this.editorData.type + "");
      this.$set(this.params, "client_id", parseInt(this.editorData.client_id));
      this.$set(this.params, "name", this.editorData.name);
      this.$set(this.params, "description", this.editorData.description);
      console.log(this.editorData);
    },
    // 保存按钮
    saveProjectEditor() {
      console.log(this.params);
      this.$http.post("/project/created", this.params).then(() => {
        this.$message.success(this.$t("projectDialog.form.save_message"));
        this.closeDialog();
      });
    },
    // 关闭弹出框
    closeDialog() {
      this.$emit("closeDialog");
    },
    // 传一个参数的代表取消编辑  不刷新列表
    closeDialogCan() {
      this.$emit("closeDialog", "1");
    },
  },
};
</script>

<style lang='less' scoped>
</style>